既然上篇已經講到該如何在JS裡能夠選取到各節點，今天就順勢來介紹一下如果想要更改節點的文字內容或直接更改整個節點該怎麼做吧!

textContent

主要是顯示出當前選擇到的節點的文字內容

<div class="ck">ckfat</div>

let ck =document.querySelector('.ck')
console.log(ck.textContent) // 印出 "ckfat"

在後面接等號=可以更改此節點的文字內容!

let ck =document.querySelector('.ck')
ck.textContent = '123'
console.log(ck.textContent) // 印出 "123"

但textContent比較單純，真的就是拿來更改文字內容用的，並不能夠直接將HTML標籤塞到裡面，但innerHTML可以做到這件事情!

innerHTML

一樣能夠顯示當前節點的文字內容

<div class="ck">ckfat</div>

let ck =document.querySelector('.ck')

console.log(ck.innerHTML) // 印出 "ckfat"

在後面使用等號=一樣可以更改文字內容

let ck =document.querySelector('.ck')
ck.innerHTML = '123'
console.log(ck.innerHTML) // 印出 "123"

但他不只能做到更改文字內容，更可以讀取到HTML標籤!

let ck =document.querySelector('.ck')
ck.innerHTML = `<h2>hi</h2>`
console.log(ck.innerHTML) //印出"<h2>hi</h2>"

雖然一樣印出所有的文字，但仔細看網頁上，確實有將hi更改成h2標籤!今天想用JS在原本的div裡寫入一大塊HTML標籤也不是夢!!!

所以如果要更改節點的文字內容的話，還是主要以使用textContent為主，因為如果使用innerHTML的話如果有心人士想算改你的程式碼，他是有辦法直接把整個內容更改的!

今天就講解到這邊，謝謝大家!